<template>
  <div :style="{ width: '100%', height: '100%' }">
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/lib/chart/line';
import { xbarxs2 } from '@/api/bigscreen/bigscreen';

export default {
  name: 'xbarxs2',
  data() {
    return {
      chart: null,
      chartData: [],
      data:[],
      total:20,
      yAxisMin: null,
      yAxisMax: null
    };
  },
  mounted() {
    this.getData();
    this.tmfive();
    this.initChart();
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    getData() {
      xbarxs2().then(response => {
        // this.chartData = response.data;
        // this.calculateMinMax();
        this.data =  response.data;
        for (var i = 0; i < this.total; i++) {
          this.chartData.push(this.data[i]);
          this.calculateMinMax();
        }

      });
    },
    tmfive() {
      setTimeout(() => {
        this.initnormality();
      }, 100);
    },
    initnormality() {
      if (this.chartData.length > 0) {
        this.initChart();
        var that = this;
        setInterval(function () {
          if(that.total<that.data.length) {
            that.total = that.total + 1;
            that.chartData.shift();
            that.chartData.push(that.data[that.total]);
            that.calculateMinMax();
            that.chart.setOption({
              xAxis: {
                type: 'category',
                data: that.chartData.map(item => item.product),
                axisLabel: {
                  interval: 0, // 显示所有标签
                  rotate: -45, // 旋转角度
                  fontSize: 8 // 修改为需要的字体大小
                },
                splitLine: {
                  show: false // 不显示网格线
                },
              },
              series: [
                {
                  name: 'mmc',
                  type: 'line',
                  data: that.chartData.map(item => item.mmc)
                },
                {
                  name: 'mtp',
                  type: 'line',
                  data: that.chartData.map(item => item.mtp)
                },
                {
                  name: 'ucl',
                  type: 'line',
                  data: that.chartData.map(item => item.ucl),
                  symbol: 'none', // 这里设置标记点不显示
                  lineStyle: {
                    width: 1, // 设置线条宽度
                    color: '#fff', // 设置线条颜色
                    type: 'dotted'// 点的边框类型，可以是 'solid', 'dashed', 或者 'dotted'
                  },
                },
                {
                  name: 'lcl',
                  type: 'line',
                  data: that.chartData.map(item => item.lcl),
                  symbol: 'none', // 这里设置标记点不显示
                  lineStyle: {
                    width: 1, // 设置线条宽度
                    color: '#fff', // 设置线条颜色
                    type: 'dotted'// 点的边框类型，可以是 'solid', 'dashed', 或者 'dotted'
                  },
                }
              ]
            });
          }
        }, 1000);

      } else {
        this.tmfive();
      }
    },
    calculateMinMax() {
      const mmcValues = this.chartData.map(item => item.mmc);
      const mtpValues = this.chartData.map(item => item.mtp);
      const uclValues = this.chartData.map(item => item.ucl);
      const lclValues = this.chartData.map(item => item.lcl);

      const allValues = [...mmcValues, ...mtpValues, ...uclValues, ...lclValues];
      const min = Math.min(...allValues);
      const max = Math.max(...allValues);

      // 计算缓冲范围
      const bufferRange = (max - min) * 0.05; // 缓冲范围为最大值与最小值差值的 5%

      this.yAxisMin = min - bufferRange; // 最小值减去缓冲范围
      this.yAxisMax = max + bufferRange; // 最大值加上缓冲范围

    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, "dark");
      const option = {
        title: {
          text: 'RL-X-BRA', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            fontSize: 14 // 设置标题字体大小为20
          }
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '20%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          }
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        legend: {
          data: ['mmc', 'mtp', 'ucl', 'lcl'],
          top: '12%',
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度
        },
        xAxis: {
          type: 'category',
          data: this.chartData.map(item => item.product),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: -45, // 旋转角度
            fontSize: 8 // 修改为需要的字体大小
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: 8 // 修改为需要的字体大小
          },
          min: this.yAxisMin,
          max: this.yAxisMax,
        },
        series: [
          {
            name: 'mmc',
            type: 'line',
            data: this.chartData.map(item => item.mmc)
          },
          {
            name: 'mtp',
            type: 'line',
            data: this.chartData.map(item => item.mtp)
          },
          {
            name: 'ucl',
            type: 'line',
            data: this.chartData.map(item => item.ucl),
            symbol: 'none', // 这里设置标记点不显示
            lineStyle: {
              width: 1, // 设置线条宽度
              color: '#fff', // 设置线条颜色
              type:'dotted'// 点的边框类型，可以是 'solid', 'dashed', 或者 'dotted'
            },
          },
          {
            name: 'lcl',
            type: 'line',
            data: this.chartData.map(item => item.lcl),
            symbol: 'none', // 这里设置标记点不显示
            lineStyle: {
              width: 1, // 设置线条宽度
              color: '#fff', // 设置线条颜色
              type:'dotted'// 点的边框类型，可以是 'solid', 'dashed', 或者 'dotted'
            },
          }
        ]
      };

      this.chart.setOption(option);
    },
    onResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>
